<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="./static/css/about_me.css">
    <!-- 鼠标点击文字显示效果css代码-->
    <link rel="stylesheet" href="../public_static/css/mouse_click_effect.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>关于我</h1>
            <p class="tagline">热爱生活，专注技术，记录思考与成长的每一刻</p>
        </header>
        
        <div class="main-content">
            <div class="profile-section">
                <div class="profile-pic-container">
                    <img src="./static/images/about_me/个人照片.jpg" alt="个人照片" class="profile-pic">
                </div>
                
                <div class="bio">
                    <h2>个人简介</h2>
                    <p>你好！我是葱花，一名研究生，平常喜欢尝试前端开发。我热衷于创造直观、用户友好的数字体验，并喜欢分享我的知识和经验。</p>
                    <p>工作之余，我喜欢摄影、徒步旅行和阅读科幻小说。这些爱好帮助我保持创造力和对新事物的好奇心。</p>
                </div>
            </div>
            
            <div class="details-section">
                <h2 class="section-title">专业技能</h2>
                <div class="skills">
                    <div class="skill-item">HTML5/CSS3</div>
                    <div class="skill-item">JavaScript</div>
                    <div class="skill-item">Python</div>
                    <div class="skill-item">Flask</div>
                    <div class="skill-item">Electron</div>
                    <div class="skill-item">Node.js</div>
                </div>
                
                <h2 class="section-title">个人经历</h2>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2025 - 至今</div>
                        <div class="timeline-content">
                            <h3>研究生</h3>
                            <p>学习系统开发的知识</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2021 - 2025</div>
                        <div class="timeline-content">
                            <h3>工学学士</h3>
                            <p>主修工程经济，平常喜欢系统开发。在校期间参与过多个项目，获得优秀毕业生称号。</p>
                        </div>
                    </div>
                </div>
                
                <h2 class="section-title">生活瞬间</h2>
                <div class="gallery">
                    <div class="gallery-item">
                        <img src="./static/images/about_me/平潭海边桥.jpg" alt="旅行">
                    </div>
                    <div class="gallery-item">
                        <img src="./static/images/about_me/坐在海边礁石上.jpg" alt="自然">
                    </div>
                    <div class="gallery-item">
                        <img src="./static/images/about_me/平潭海边沙滩.jpg" alt="摄影">
                    </div>
                    <div class="gallery-item">
                        <img src="./static/images/about_me/烟花.jpg" alt="旅行">
                    </div>
                    <div class="gallery-item">
                        <img src="./static/images/about_me/武汉东湖边.jpg" alt="旅行">
                    </div>
                    <div class="gallery-item">
                        <img src="./static/images/about_me/流坑古村.jpg" alt="旅行">
                    </div>
                </div>
                
                <h2 class="section-title">联系我</h2>
                <div class="contact">
                    <div class="contact-item picture-item">
                        <div class="icon">@</div>
                        <span>1509054114@qq.com</span>
                        <div class="picture-qrcode">
                            <img src="./static/images/about_me/QQ邮箱.png" alt="微信二维码">
                        </div>
                    </div>
                    <div class="contact-item picture-item">
                        <div class="icon">WX</div>
                        <span>19808096020</span>
                        <div class="picture-qrcode">
                            <img src="./static/images/about_me/微信.png" alt="微信二维码">
                        </div>
                    </div>
                    <div class="contact-item picture-item">
                        <div class="icon">QQ</div>
                        <span>1509054114</span>
                        <div class="picture-qrcode">
                            <img src="./static/images/about_me/QQ.png" alt="QQ二维码">
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <script src="./static/js/about_me.js"></script>
</body>
</html>